<template>
  <div class="statisticsListPage h100">
    <h2 class="title18">{{ $t('versionList') }}<span style="margin-left:5px;">( 100 )</span></h2>
    <div class="statisticsListSearch">
      <statistics-version-search @clickbtn="handleClickSearchBtn"></statistics-version-search>
    </div>
    <div class="statisticsListMain">
      <statistics-version-table-list ref="StatisticsVersionTbList" @clickbtn="handleClickListBtn">
      </statistics-version-table-list>
    </div>
    <!-- 右侧抽屉 -->
    <right-drawer
      ref="rightDrawer"
      :title="formTitle"
      :showBtn="false"
      :warpWidth="rightDrawerWidth"
    >
      <component
        v-if="rightDrawerOPen"
        ref="drawerContent"
        :is="editFormComp"
        :formTitle="formTitle"
        :recordData="editRecord"
        :recordTitle="$t('partNumber')"
      >
      </component>
    </right-drawer>
  </div>
</template>
<script>
import StatisticsVersionSearch from './components/StatisticsVersionSearch'
import StatisticsVersionTableList from './components/StatisticsVersionTableList'
import RightDrawer from '@/components/SelfComponents/RightDrawer'
import { mapGetters, mapMutations } from 'vuex'
import RelatedVersion from '@/views/components/RelatedVersion'
import RelatedModel from '@/views/components/RelatedModel'
export default {
  components: {
    StatisticsVersionSearch,
    StatisticsVersionTableList,
    RightDrawer,
    RelatedVersion,
    RelatedModel
  },
  computed: {
    ...mapGetters(['rightDrawerOPen'])
  },
  data () {
    return {
      formTitle: '',
      editRecord: null,
      recordTitle: '',
      rightDrawerWidth: 520,
      editFormComp: null
    }
  },
  methods: {
    ...mapMutations(['SET_rightDrawerLoading', 'SET_rightDrawerOPen']),
    handleClickSearchBtn (data) {
      if (this[data.type]) {
        this[data.type]()
      }
    },
    handleClickListBtn (data) {
      if (this[data.type]) {
        this[data.type](data.data)
      }
    },
    searchData () {
      this.$refs.StatisticsVersionTbList.refreshData()
    },
    relatedNum (record, title) {
      if (title === 'relatedVersion') {
        this.drawerContent = 'RelatedVersion'
      } else if (title === 'relatedModel') {
        this.drawerContent = 'RelatedModel'
      }
      this.formTitle = this.$t(title)
      this.editRecord = record
      this.SET_rightDrawerOPen(true)
    },
    relatedModel (record) {
      this.editRecord = record
      this.showForm(this.$t('relatedModel'), 'RelatedModel')
    },
    relatedVersion (record) {
      this.editRecord = record
      this.showForm(this.$t('relatedVersion'), 'RelatedVersion')
    },
    showForm (title, comp, width = 510) {
      this.formTitle = title
      this.editFormComp = comp
      this.rightDrawerWidth = width
      this.SET_rightDrawerOPen(true)
    }
  },
  beforeDestroy () {
    this.$store.commit('resetStatisticsVersionQueryParams')
  }
}
</script>
<style lang="less" scoped>
@import url("../style/statisticsList");
</style>
<style lang="less">
.statisticsListPage {
  .ant-form-item {
    margin-bottom: 15px;
  }
}
</style>
